<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Lightly-HTML-Project</title>
  </head>
  <style>
    /*209020347罗宋波*/
    .top,
		.banner,
		.main,
		.footer {
			width: 960px;
			text-align: center; /* 文字居中对齐 */
			margin: 0 auto; /* 可以让盒子居中对齐  只要保证 左右auto就阔以了 */
			margin-bottom: 10px;
			border: 1px dashed #ccc;
		}
		.top {		
			height: 200px;
			background-color: pink;									
		}
		.banner {
			height: 300px;
			background-color: purple;
		}
		.main {
			height: 500px;
			background-color: hotpink;
		}
		.footer {
			height: 400px;
			background-color: black;
		}
    #ad-wrap {
      position: fixed;
      top: 0px;
      
    height: 250px;
      z-index: 10;
      left: 50%;
      margin-left: -500px;
}
.ad{
  position: absolute;
  top: 0px;
  width: 168px;
}
#ad-left {
  left: -240px;
}
#ad-right {
  right: -1232px;
}
.ad-close {
  position: absolute;
  top: 0px;
  right: 4px;
  font-size: 10px;
  cursor: pointer;
}
#popup-wrap {
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 999;
}
.popup {
  position: relative;
  width: 200px;
  height: 200px;
  background-image: url("img/xuej.jpg");
  box-shadow: 0px 0px 10px #888;
  overflow: hidden;
  display: none;
}
.popup button {
  display: block;
  margin: 0 auto;
}
  </style>
  <body>
  <div id="ad-wrap">
    <div id="ad-left" class="ad">
      <a href="#" >
        <img src="img/cxk.jpg" alt="左侧广告">
      </a>
      <div class="ad-close">关闭</div>
    </div>
    <div id="ad-right" class="ad">
      <a href="#" >
        <img src="img/cxk.jpg" alt="右侧广告">
      </a>
      <div class="ad-close">关闭</div>
    </div>
  </div>
  <div class="top">top</div>
	<div class="banner">banner</div>
	<div class="main">main</div>
	<div class="footer">footer</div>
  <div id="popup-wrap">
    <div id="popup" class="popup">
      <div>
        <button id="close-popup">关闭</button>
      </div>
    </div>
  </div>
    <script>
      // 对联广告
var adLeft = document.getElementById('ad-left');
var adRight = document.getElementById('ad-right');
var adClose = document.querySelectorAll('.ad-close');
function closeAd() {
  adLeft.style.display = 'none';
  adRight.style.display = 'none';
}
for (var i = 0; i < adClose.length; i++) {
  adClose[i].addEventListener('click', closeAd);
}
// 右下角弹窗广告
var popup = document.getElementById('popup');
var closePopup = document.getElementById('close-popup');
function openPopup() {
  popup.style.display = 'block';
}
function closePopupFunc() {
  popup.style.display = 'none';
}
setTimeout(openPopup, 5000);
closePopup.addEventListener('click', closePopupFunc);
    </script>
  </body>
</html>
